<template>
  <a-modal
    width="80%"
    v-model="modal2Visible"
    title="灌溉记录信息表"
    centered
    @ok="() => (modal2Visible = false)"
  >
    <a-row>
      <a-col :span="24">
        <a-select placeholder="操作类型" allowClear v-model="type" style="width: 200px;margin-right: 20px;">
          <a-select-option value="0">
            请选择
          </a-select-option>
          <a-select-option value="1">
            操作
          </a-select-option>
          <a-select-option value="2">
            异常
          </a-select-option>
        </a-select>
        <a-range-picker @change="onChange" style="width: 200px;margin-right: 20px;"/>
        <a-button type="primary" @click="search" style="background: #3C67F1;border: none">查询</a-button>
      </a-col>
      <a-col :span="24" style="text-align: right; margin-bottom: 20px">
        <a-button @click="exportXlsBtn('灌溉记录')" icon="export" style="margin-right: 10px;border: 1px solid #B3D8FF;background: #ECF5FF;color: #409EFF;"
                  type="primary" ghost>导出
        </a-button>
      </a-col>
      <a-col :span="24">
        <a-table :rowKey="(record,index)=>{return index}" :columns="columns" :data-source="data" bordered>
           <span slot="indexRender" slot-scope="record, index, indent, expanded">
                {{ indent + 1 }}
         </span>
          <span slot="type" slot-scope="record, index, indent, expanded">
                {{ index.type == '1' ? '操作' : '异常' }}
         </span>
        </a-table>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import {hspOperationRecord} from '@/api/device'
import {exportXls} from "@api/meteorological";

const columns = [
  {
    title: '序号',
    scopedSlots: {customRender: 'indexRender'}
  },
  {
    title: '标题',
    dataIndex: 'title',
  },
  {
    title: '设备名称',
    dataIndex: 'deviceName',
  },
  {
    title: '操作类型',
    scopedSlots: {customRender: 'type'}
  },
  {
    title: '操作时间',
    dataIndex: 'operateDate',
  }
]

export default {
  data() {
    return {
      modal2Visible: false,
      data: [],
      columns,
      type: '0',
      sTime: '',
      eTime: '',
      pageNo: 1,
      pageSize: 10,
      total: 0,
      exportUrl: '/fabr/fabrOperateRecord/exportXls'
    }
  },
  mounted() {
    this.dataList()
  },
  methods: {
    exportXlsBtn(message) {
      exportXls(this.exportUrl).then(res => {
        const blob = new Blob([res], {type: 'application/vnd.ms-excel'})
        const urls = window.URL.createObjectURL(blob)
        const a = document.createElement('a') // 生成虚拟a标签
        a.href = urls
        a.download = message + '.xls'
        a.click()
        document.body.removeChild(a) // 下载完成移除元素
        window.URL.revokeObjectURL(urls) // 释放掉blob对象
      }).catch(err => {

      })
    },
    search() {
      this.dataList()
    },
    onChange(date, dateString) {
      console.log(dateString);
      this.sTime = dateString[0]
      this.eTime = dateString[1]
    },
    setModal1Visible(modal1Visible) {
      this.modal1Visible = modal1Visible
    },
    dataList() {
      hspOperationRecord(this.type == undefined ? '' : this.type == '0' ? '' : this.type, this.sTime, this.eTime, this.pageNo, this.pageSize).then(res => {
        this.data = res.result.records
      }).catch(err => {

      })
    }
  }
}
</script>